import React, { Component } from "react";
import { withRouter } from 'react-router-dom';
// connect
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
//action
import { logoutAction } from "@/stroe/action/App";
import { Menu, Dropdown, message } from 'antd';
import { CaretDownOutlined } from '@ant-design/icons';
import { getUsername } from "@/utils/cookies";
import { getUserAvatar } from "@/utils/cookies";
// antd
import { Image } from 'antd';


class LayoutDropdown extends Component {
    constructor(props){
        super(props);
        this.state = {
            username: "" || getUsername(),
            avatar: "" || getUserAvatar(),
        };
    }

    onClickhd = ({ key }) => {
        if(key === 'set') { 
            // 路由跳转
            this.props.history.push('/index/user/info');
        }
        if(key === 'logout') { 
            message.info(`退出登录`);
            this.props.actions.logout();
            // 路由跳转
            this.props.history.push('/');
        } else {
            
        }
    };

    menu = (
        <Menu onClick={this.onClickhd}>
            <Menu.Item key="set">个人信息</Menu.Item>
            <Menu.Item key="logout" style={{textAlign: 'center'}}>退出登录</Menu.Item>
        </Menu>
    );
      
    render(){
        return (
            <Dropdown overlay={this.menu}>
                <div className="ant-dropdown-link-user-child" onClick={this.onClickhd}>
                    {this.state.username.split('@')[0]} <CaretDownOutlined />
                    <Image 
                      width={20}
                      preview={false}
                      src={this.state.avatar}
                    />
                </div>
            </Dropdown>
        )
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators({
            logout: logoutAction
        }, dispatch)
    }
}

export default connect(
    null,
    mapDispatchToProps
)(withRouter(LayoutDropdown));
